<!DOCTYPE html>
<html>

<head>
  <title>ui_container Demo Page</title>
</head>

<body>
  <div id="left" style="position: relative; right: 10px; top: 10px; width: 500px; height: 500px; overflow: scroll; margin: 40px; padding: 20px; border: 1px solid black">
    <h2 style="height: 400px">Left side iframe</h2>
    <textarea>
        <table style="border-collapse: collapse; width: 100%;" border="1">
            <tbody>
            <tr>
            <td style="width: 50%;">&nbsp;</td>
            <td style="width: 50%;">&nbsp;</td>
            </tr>
            <tr>
            <td style="width: 50%;">&nbsp;</td>
            <td style="width: 50%;">&nbsp;</td>
            </tr>
            </tbody>
        </table>
      </textarea>

      <h2>Left side inline</h2>
      <div class="tinymce" style="margin-bottom: 1000px">
        <table style="border-collapse: collapse; width: 100%;" border="1">
          <tbody>
            <tr>
              <td style="width: 50%;">&nbsp;</td>
              <td style="width: 50%;">&nbsp;</td>
            </tr>
            <tr>
              <td style="width: 50%;">&nbsp;</td>
              <td style="width: 50%;">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

  <div id="right" style="position: absolute; right: 10px; top: 10px; width: 500px; height: 500px; overflow: scroll; margin: 40px; padding: 20px; border: 1px solid black">
    <h2 style="height: 400px">Right side iframe</h2>
    <textarea>
      <table style="border-collapse: collapse; width: 100%;" border="1">
          <tbody>
          <tr>
          <td style="width: 50%;">&nbsp;</td>
          <td style="width: 50%;">&nbsp;</td>
          </tr>
          <tr>
          <td style="width: 50%;">&nbsp;</td>
          <td style="width: 50%;">&nbsp;</td>
          </tr>
          </tbody>
      </table>
    </textarea>

    <h2>Right side inline</h2>
    <div class="tinymce" style="margin-bottom: 1000px">
      <table style="border-collapse: collapse; width: 100%;" border="1">
        <tbody>
          <tr>
            <td style="width: 50%;">&nbsp;</td>
            <td style="width: 50%;">&nbsp;</td>
          </tr>
          <tr>
            <td style="width: 50%;">&nbsp;</td>
            <td style="width: 50%;">&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="../../../../js/tinymce/tinymce.js"></script>
  <script src="../../../../scratch/demos/core/demo.js"></script>
  <script>demos.UiContainerDemo();</script>
</body>
</html>